/**
 * Created by win7 on 2017/3/2.
 */
import React from 'react';
import Styles from '../util/Styles.js'
/*
* touch 点击后的方法
* tcontext 按钮显示的文字
* */

export default class Confirm extends React.Component {
    constructor(props){
        super(props)
        this.state={
            flag:true,
            disabled:false
        }
        this.Style={}
    }

    componentWillMount(){
        this.Style.buttonview={
            backgroundColor:(this.props.style&&this.props.style.backgroundColor)||Styles.defaultcolor,
            width:this.props.style&&this.props.style.width||70,
            height:this.props.style&&this.props.style.height||30,
            lineHeight:this.props.style&&this.props.style.lineHeight||"22px",
            fontSize:this.props.style&&this.props.style.fontSize||10,
            borderRadius:this.props.style&&this.props.style.borderRadius,
            marginTop:this.props.style&&this.props.style.marginTop||0,
            marginLeft:this.props.style&&this.props.style.marginLeft||0,
            color:this.props.style&&this.props.style.color||"#000",
            border:this.props.style&&this.props.style.border||"none",
            fontFamily:this.props.style&&this.props.style.fontFamily||"Arial",
            textAlign:"center",
            outline:"none",
            cursor:'pointer',

        }

        this.Style.buttonchange={
            backgroundColor: Styles.buttonchangecolor,
            width:this.props.style&&this.props.style.width||70,
            height:this.props.style&&this.props.style.height||30,
            lineHeight:this.props.style&&this.props.style.lineHeight||"22px",
            fontSize:this.props.style&&this.props.style.fontSize||10,
            borderRadius:this.props.style&&this.props.style.borderRadius,
            color:this.props.style&&this.props.style.color||"#000",
            marginTop:this.props.style&&this.props.style.marginTop||0,
            marginLeft:this.props.style&&this.props.style.marginLeft||0,
            border:this.props.style&&this.props.style.border||"none",
            fontFamily:this.props.style&&this.props.style.fontFamily||"Arial",
            textAlign:"center",
            outline:"none",
            cursor:'pointer',

        }
    }
    touch(){
        if(this.props.touch){
            this.props.touch();
        }
    }
    mousedown(flag){
        this.setState({
            flag:!flag
        });
    }

    mouseup(flag){
        this.setState({
            flag:!flag
        })
    }

    render() {
        return (
            <button style={this.state.flag?this.Style.buttonview:this.Style.buttonchange} className={this.props.className} onClick={this.touch.bind(this)}
                        onMouseDown={this.mousedown.bind(this,this.state.flag)}
                        onMouseUp={this.mouseup.bind(this,this.state.flag)}
                        onMouseOut={this.mouseup.bind(this,false)}
                        disabled={this.state.disabled}>{this.props.tcontext}</button>
        );
    }
}

